<template>
    <div id="app">
        <header>
            <nav-view />
        </header>
        <main>
            <router-view></router-view>
        </main>

        <el-backtop :style="{ right: isSmallScreen ? '1rem' : '4rem', bottom: isSmallScreen ? '2rem' : '4rem' }" :visibility-height="200"
            :z-index="2000">
            <div style="display: flex; align-items: center; ">
                <div v-if="!isSmallScreen">Back to top</div>
                <img v-if="!isSmallScreen" :src="getImage('footer/totop.png')" alt="">
                <el-icon v-else><ArrowUpBold /></el-icon>
            </div>
        </el-backtop>
    </div>
</template>

<script setup lang="ts" name="App">
import NavView from './components/BeeNav.vue'

import { useScreenSize } from './utils/useScreenSize';
const { isSmallScreen } = useScreenSize()

</script>

<style scoped lang="scss">
main {
    padding-top: var(--nav-height);
}

.el-backtop {
    width: fit-content;
    padding: 0 1rem;
    border-radius: 20px;
    color: inherit;
    /* box-shadow: none; */
    font-size: 1rem;
    z-index: 2000;

    img {
        width: 30px;
        padding-left: 10px;
    }
}

@media (max-width: 650px) {
    .el-backtop {
        right: 1rem;
    }
}
</style>